body{
    overflow: hidden;
    background: rgba(0, 0, 0, 0.9);
}
.heart{
    width: 200px;
    height: 200px;
    margin: 50px auto;
    position: relative;
}
.snowfall-flakes::before, 
.snowfall-flakes::after{
    content: "";
    width: 10px;
    height: 16px;
    background: red;
    border-radius: 5px 5px 0 0;
    position: absolute;
    left: 0;
    top: 0;
}
.snowfall-flakes:before{
    transform: rotate(-45deg);
}
.snowfall-flakes:after{
    transform: translateX(4.3px) rotate(45deg);
}

/* 万花筒 */
.wonhot{
    width: 200px;
    height: 300px;
    /* background: #ff9966; */
    margin: 150px auto;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-30deg);
    animation: move 9s linear  infinite ;
    
}
.continaner{
    width: 200px;
    height: 300px;
    position: absolute;

}
img{
    width: 200px;
    height: 300px;
    background-color: black;
}
.continaner:nth-of-type(1){
    transform: rotateY(0deg) translateZ(275px);
}
.continaner:nth-of-type(2){
    transform: rotateY(50deg) translateZ(275px);
}
.continaner:nth-of-type(3){
    transform: rotateY(100deg) translateZ(275px);
}
.continaner:nth-of-type(4){
    transform: rotateY(150deg) translateZ(275px);
}
.continaner:nth-of-type(5){
    transform: rotateY(200deg) translateZ(275px);
}
.continaner:nth-of-type(6){
    transform: rotateY(250deg) translateZ(275px);
}
.continaner:nth-of-type(7){
    transform: rotateY(300deg) translateZ(275px);
}
.continaner:nth-of-type(8){
    transform: rotateY(360deg) translateZ(275px);
}
/* .continaner:nth-of-type(9){
    transform: rotateY(320deg) translateZ(275px);
} */
@keyframes move {
    0%{ 
        transform: rotateY(0deg) ;
    }
    50%{   
        transform: rotateY(180deg) ;
    }
    100%{  
        transform: rotateY(360deg) ;
    }
    
}